import {onMounted, reactive, ref} from 'vue';
import { getCategoryList,packageMgtAdd,packageMgtQueryOne,packageMgtEdit } from '../../api/package.js'
import { useTableData } from "../../hooks/table/useTableData.js";
import {getDishCate} from "../../api/dishMgt.js";
import { useRouter } from "vue-router";
export function usePackageData(imageUrl,page) {
  let configData = ref([])
  let categories = ref([])
  let categoryList = ref([])
  let viewImage = ref(null)
  const router = useRouter()
  let activeCategoryId = ref(null)
  async function getDishCateList() {
    const { data: { data } } = await getDishCate(2);
    categoryList.value = data.map((item) => ({ label: item.name, value: item.id }));
  }
  const formItems = ref([
    {
      label: '套餐名称',
      key: 'name',
      type: 'el-input',
      width: 400,
      placeholder: '请填写套餐名称',
      rules: [
        { required: true, message: '请填写套餐名称', trigger: 'blur' },
      ],
    },
    {
      label: '套餐分类',
      key: 'categoryId',
      type: 'el-select',
      width: 400,
      options: categoryList,
      placeholder: '请选择套餐分类',
      rules: [
        { required: true, message: '请选择套餐分类', trigger: 'blur' },
      ],
    },
    {
      label: '套餐价格',
      key: 'price',
      type: 'el-input',
      width: 400,
      placeholder: '请填写套餐价格',
      rules: [
        { required: true, message: '请填写套餐价格', trigger: 'blur' },
      ],
    },
    {
      label: '套餐菜品',
      key: 'config',
      isSlot: true,
    },
    {
      label: '套餐图片',
      key: 'image',
      isSlot: true,
    },
    {
      label: '菜品描述',
      key: 'description',
      type: 'el-input',
      inputType: 'textarea',
      width: 800,
      rows: 5,
      placeholder: '套餐描述，最长200字',
    },
  ]);
  const columns = ref([
    {
      label: '套餐名称',
      prop: 'name',
      align: 'center',
    },
    {
      label: '状态',
      prop: 'status',
      isSlot: true,
      align: 'center',
    },
    {
      label: '价格',
      prop: 'price',
      align: 'center',
    },
  ]);
  const configColumns = ref([
    {
      label: '名称',
      prop: 'name',
      align:'center'
    },
    {
      label: '原价',
      prop: 'price',
      align: 'center',
    },
    {
      label: '份数',
      prop: 'count',
      align: 'center',
      isSlot: true,
    },
    {
      label: '操作',
      prop: 'operation',
      align: 'center',
      isSlot: true
    },
  ])
  const formProps = reactive({
    model: {},
    formItems,
  });
  async function getCategoryListData () {
    const { data: { data } } = await getCategoryList()
    activeCategoryId.value = data[0].id
    categories.value = data.map(item => {
      return { categoryId: item.id, categoryName: item.name}
    })
  }
  function handleSelectionChange (selectedRow) {
    configData.value = selectedRow.map((item) => {
      return { dishId: item.id,name: item.name, price: item.price, count: 1 }
    });
  }
  function delItems (item) {
    configData.value.forEach((itemPackage,index) => {
      if(itemPackage.dishId === item.dishId) {
        configData.value.splice(index,1)
      }
    })
  }
  async function saveData () {
    let paramsData = {
      ...formProps.model,
      image: imageUrl.value ? imageUrl.value.value : viewImage.value ,
      setmealwithDish: configData.value
    }
    try {
     page.value === 'add' ? await packageMgtAdd(paramsData) : await packageMgtEdit(paramsData)
      router.go(-1)
    }catch (e) {
     await Promise.reject(e)
    }
  }
  // 查询单个
  async function getPackageMgtDetail () {
    const { data:{ data } } = await packageMgtQueryOne(router.currentRoute.value.query.id)
    for (let key in data) {
      formProps.model[key] = data[key]
    }
    configData.value = data.setmealwithDish
    viewImage.value = data.image
  }
  const { tableData, getTableData } = useTableData('/dish/cglist')
  onMounted(() => {
    getDishCateList().then(r => {})
    router.currentRoute.value.query.page === 'edit' && getPackageMgtDetail()
  })
  return {
    formProps,
    configData,
    categories,
    tableData,
    getTableData,
    activeCategoryId,
    columns,
    handleSelectionChange,
    delItems,
    configColumns,
    saveData,
    viewImage
  };
}
